<template>
  <div id="abc" class="abc">

  </div>
</template>

<script>
const mars3d = window.mars3d
const Cesium = window.Cesium
let map // mars3d.Map三维地图对象
let graphicLayer // 矢量图层对象
export default {
  data() {
    return {
      map: null,
      graphicLayer: null
    }
  },
  mounted() {
    const mapOptions = {
      scene: {
        center: { lat: 28.37451620560934, lng: 121.37993990124852, alt: 187118 },
        showSun: false,
        showMoon: false,
        showSkyBox: false,
        showSkyAtmosphere: false,
        fog: false,
        backgroundColor: " #120f44", // 天空背景色
        globe: {
          baseColor: "#120f44", // 地球地面背景色
          showGroundAtmosphere: false,
          enableLighting: false
        }
      },
      control: {
        baseLayerPicker: false
      },
      basemaps: [
      ],
      layers: []
    }
    map = new mars3d.Map('abc', mapOptions)
    const borderWall = new mars3d.layer.GeoJsonLayer({
      name: "合肥市边界墙",
      url: "//data.mars3d.cn/file/geojson/areas/331081.json",
      symbol: {
        type: "wallP",
        styleOptions: {
          setHeight: -25000,
          diffHeight: 25000, // 墙高
          materialType: mars3d.MaterialType.Image2,
          materialOptions: {
            image: "https://inews.gtimg.com/om_bt/O6SG7dHjdG0kWNyWz6WPo2_3v6A6eAC9ThTazwlKPO1qMAA/641",
            color: "#4881A7"
          }
        }
      },
      show: true
    })
    console.log(map, borderWall)
    // map.addLayer(borderWall)
    graphicLayer = new mars3d.layer.GraphicLayer()
    map.addLayer(graphicLayer)
    const geojson = require('./1.json')
      const arr = mars3d.Util.geoJsonToGraphics(geojson)
      console.log(arr)

      for (let i = 0; i < arr.length; i++) {
        const item = arr[i]
        const polygonEntity = new mars3d.graphic.PolygonEntity({
          positions: item.positions,
          style: {
            fill: true,
            color: "#4881a7",
            opacity: 0.5,
            label: {
              text: item.attr.name,
              font_size: 20,
              color: "#ffffff",
              font_family: "楷体",
              outline: true,
              outlineColor: "black",
              setHeight: 2000,
              visibleDepth: false,
              distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 500000),
              scaleByDistance: new Cesium.NearFarScalar(200000, 1.0, 500000, 0.5)
            }
          }
        })
        graphicLayer.addGraphic(polygonEntity)
        const graphicLine = new mars3d.graphic.PolylineEntity({
          positions: item.positions,
          style: {
            color: "rgba(255,255,255,0.5)",
            width: 1
          }
        })
        graphicLayer.addGraphic(graphicLine)
        const center = item.attr.centroid
        const coneGlow = new mars3d.graphic.LightCone({
          position: center,
          style: {
            radius: 1500,
            height: 15000
          }
        })
        graphicLayer.addGraphic(coneGlow)
        const number = Math.floor(Math.random() * (4000 - 3000 + 1) + 3000)
        const graphic = new mars3d.graphic.DivGraphic({
          position: [center[0], center[1], 12000],
          style: {
            html: `<div class ="coneNum">${number}`,
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: Cesium.VerticalOrigin.CENTER,
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 500000),
            scaleByDistance: new Cesium.NearFarScalar(200000, 1.0, 500000, 0.5)
          }
        })
        graphicLayer.addGraphic(graphic)
      }
    // mars3d.Util.fetchJson({ url: "//data.mars3d.cn/file/geojson/areas/340100_full.json" })
    // .then(function () {
      
    // })
    // .catch(function (error) {
    //   console.log("加载JSON出错", error)
    // })
  }
}
</script>

<style scoped lang="less">
.abc {
  position: absolute;
  left: 0;
  top: 0;
  width: 1500px;
  height: 1000px;
}
</style>
